import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve} from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
    },
    extensions: ['.tsx', '.jsx', '.js', '.ts'],
  },
  server: {
    port:10001,
    // 在服务器启动时是否自动在浏览器中打开应用程序
    open: true,
    host: '0.0.0.0',
    proxy: {
      '/api': {
        target: 'http://loacalhost:7001',
        changeOrigin: true,
        // 允许websocket代理
        ws: true,
        rewrite: path => path.replace(/^\/api/, ''), // 将/api替换为空
      }
    }
  },
  build: {
    // 如果设置为false，整个项目中的所有 CSS 将被提取到一个 CSS 文件中
    cssCodeSplit: true,
    target: 'es2015',
    // 构建后是否生成source map文件
    sourcemap: false,
    // 小于此阈值的图片转为 base64 格式编码(2kb)
    assetsInlineLimit: 2048,
    // 静态资源的存放目录
    assetsDir: 'static',
    rollupOptions: {
      output: {
        // 静态资源分类打包(js\css\图片分开打包在不同文件夹)
        // 该选项用于对代码分割中产生的 chunk 文件自定义命名https://www.rollupjs.com/guide/big-list-of-options#%E6%A0%B8%E5%BF%83%E5%8A%9F%E8%83%BD-core-functionality
        chunkFileNames: 'static/js/[name]-[hash].js',
        // 入口构建块的命名模式(该选项用于指定 chunks 的入口文件名)
        entryFileNames: 'static/js/entry-[hash].js',
        // 该选项用于自定义构建结果中的静态文件名称
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        // 最小化拆分包, 按需加载每个页面的 js 逻辑
        manualChunks(id) {
          if (id.includes('node_modules')) {
            // 获取打包的包名字，也可以自己定义一个固定的名字
            // return id.toString().split('node_modules/')[1].split('/')[0].toString();
            return 'verdors';
          }
        },
      },
    },
  },
})
